<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户管理</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.min.css">
    <link href="//cdn.bootcss.com/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.24/daterangepicker.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/skins/skin-blue.min.css">
    <link rel="stylesheet" type="text/css" href="../../vendor/easyui/themes/default/easyui.css">
    <link href="https://cdn.bootcss.com/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.css" rel="stylesheet">
    <style>
        thead th {
            background-color: #f1f1f1;
            min-width: 50px;
        }

        td {
            background-color: #fafffb;
            border: white solid 1px;
        }

        th, td {
            font-size: 12px;
        }

        .box {
            border: 0px;
        }

        .input-group {
            padding-top: 15px;
        }

        .hover:hover {
            cursor: pointer;
        }

        .form-control input-sm {
            width: 200px;
        }

        #add {
            float: left;
        }
        #search{
            padding-left: 8px;
            width: 400px;
        }
    </style>
    <script src="../../vendor/jquery/jQuery-2.2.0.min.js"></script>
    <script src="../../vendor/jquery/jqueryUi/jquery-ui.min.js"></script>
    <script src="../../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/i18n/defaults-zh_CN.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/locale/zh-cn.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.js"></script>
    <script src="../../vendor/bootstrap/js/daterangepicker.js"></script>
    <script src="../../address-resolver.js"></script>
    <script src="../../vendor/vue/vue.min.js"></script>
    <script src="../../common.js"></script>


</head>

<body>


<div id="app" class="container-fluid">
    <div class="input-group">

      <!--  <div class="input-group" id="add">
            <a class="btn btn-primary" href="register.html">新增</a>
        </div>-->

        <div class="input-group" id="search">
            <input type="text" v-model="username" class="form-control input-group-sm" placeholder="账号"><span
                class="input-group-addon btn btn-primary" @click="search">搜索</span>
        </div>

    </div>


    <div class="row">
        <div class="col-xs-7">
            <div class="box">
                <div class="box-body table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>账号</th>
                            <th>密码</th>
                            <th>邮箱</th>
                            <th>电话</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="user in userlist">
                            <td>{{$index+1}}</td>
                            <td>{{user.username}}</td>
                            <td>{{user.password}}</td>
                            <td>{{user.email}}</td>
                            <td>{{user.tel}}</td>
                            <td>{{user.info}}</td>
                            <td><a href="#" @click="edit(user.username,user.password,user.email,user.tel,user.info)">修改</a> &nbsp;&nbsp;<a href="#" @click="delete(user.username)">删除</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


</div>


<script>
    //首先使用一个闭包,防止污染全局对象

    (function () {
        var Request = GetRequest();
        //定义页面的mvvm对象,用法参考 vuejs框架
        var vm;
        vm = new Vue({
            el: "#app",
            data: {
                userlist: [],
                username:''
            },
            computed: {},
            created: function () {
             this.loadData();
            },
            watch: {},
            methods: {
                loadData: function () {
                    var _this=this;
                    getList(function (data) {
                        _this.userlist = data;
                    });

                },
                search: function () {
                    var _this = this;
                    var param = {name: this.username};
                    if (this.username == "") {
                        this.loadData();
                    } else {
                        getSearch(param, function (data) {
                            _this.userlist = data;
                        })
                    }

                },
                delete:function(val){
                    var param={
                        name:val
                    };
                    getdelete(param,function () {
                        window.location.href = 'user.html';
                    });
                    this.loadData();
                },
                edit:function (username,password,email,tel,info) {
                    BootstrapDialog.show({
                        title: '修改',
                        message: getEditDialog(username,password,email,tel,info) ,
                        buttons: [{
                            label: '提交',
                            action: function () {
                                var username1=$("#username").val();
                                var password1=$("#password").val();
                                var email1=$("#email").val();
                                var tel1=$("#tel").val();
                                var info1=$("#info").val();
                                var param={username:username1,password:password1,email:email1,tel:tel1,info:info1};
                                getAdd(param,function () {
                                    window.location.href="user.html";
                                });
                            }
                        },{
                            label: '取消',
                            action: function(dialogItself){
                                dialogItself.close();
                            }
                        }]
                    });
                }
            }

        });

        function getList(cp) {
            $.get("/user/list", cp);
        }

        function getAdd(param, cp) {
            $.post("/user/add", param, cp);
        }

        function getdelete(param, cp) {
            $.get("/user/delete", param, cp);
        }

        function getSearch(param, cp) {
            $.get("/user/search", param, cp);
        }

        function getEditDialog(username,password,email,tel,info) {
            return $('<div>' +
                '<div class="form-group"><span>用户名：</span> <input id="username" type="text"   class="form-control" readonly aria-describedby="basic-addon1" value='+username+'><br></div>' +
                '<div class="form-group" > <span>密码：</span> <input id="password"   type="text" class="form-control"   aria-describedby="basic-addon1" value='+password+' ><br></div>' +
                '<div class="form-group" > <span>邮箱：</span> <input id="email"   type="text" class="form-control"   aria-describedby="basic-addon1" value='+email+' ><br></div>' +
                '<div class="form-group" > <span>电话：</span> <input id="tel"   type="text" class="form-control"   aria-describedby="basic-addon1" value='+tel+' ><br></div>' +
                '<div class="form-group" > <span>备注：</span> <input id="info"   type="text" class="form-control"   aria-describedby="basic-addon1" value='+info+' ><br></div>' +
                '</div>')
        }
    })();
</script>


</body>

</html>